<script setup>
import { ref } from "vue";
import { watch } from "vue";

// const count = ref(0);

// const setCount = () => {
//   count.value ++;
// };

const state = ref({
  count: 0,
  age: 18,
});

const setCount = () => {
  state.value.count++;
};

const setAge = () => {
  state.value.age++;
};

// const flag = ref(true);
// const setFlag = () => {
//   flag.value = !flag.value;
// };

// // 监听一个数据
// watch(count,(newValue,oldValue)=>{
//   console.log('监听的值发生变化了',newValue,oldValue);
// })

// 监听多个数据
// watch([count, flag], ([newValue, newFlag], [oldValue, oldFlag]) => {
//   console.log("监听的值发生变化了", newValue, newFlag, oldValue, oldFlag);
// });

// // immediate 立即执行参数
// // deep 深度监听
// watch(
//   count,
//   (newValue, oldValue) => {
//     console.log("监听的值发生变化了", newValue, oldValue);
//   },
//   {
//     immediate: true,
//     deep: true,
//   }
// );

// 精确监听
watch(
  () => state.value.age,
  () => console.log("age 变化了")
);
</script>


<template>
  <div>
    {{ state.count }}
    <button @click="setCount">count++</button>
  </div>
  <div>
    {{ state.age }}
    <button @click="setAge">age++</button>
  </div>
  <!-- <div>
    <button @click="setFlag">{{ flag }}</button>
  </div> -->
</template>